<template>
  <div class="p-6 max-w-[1200px] mx-auto">
    <!-- 搜索框部分 -->
    <div class="flex-x-center mb-6">
      <a-input v-model:value="searchValue" placeholder="搜索软件名称或软件功能..." class="w-[300px]" allow-clear>
        <template #prefix>
          <search-outlined />
        </template>
      </a-input>
    </div>

    <!-- 列表部分 -->
    <div>
      <ul class="flex flex-wrap gap-4">
        <li v-for="item in filteredItems" :key="item.name" @click="startExternalSoftware(item.name)"
          class="cursor-pointer h-full w-[200px] rounded-lg bg-white p-4 hover:shadow-lg transition-shadow duration-300 block hover:text-primary">
          <h3 class="text-lg font-medium mb-2">{{ item.name }}</h3>
          <p class="text-gray-600 text-sm">{{ item.inspiration }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { SearchOutlined } from "@ant-design/icons-vue";
import software from "@/assets/config/software";

const router = useRouter();
const searchValue = ref("");

// 搜索过滤功能
const filteredItems = computed(() => {
  const search = searchValue.value;
  if (!search) return software;

  return software.filter(
    (item) => item.name.includes(search) || item.inspiration.includes(search),
  );
});

function startExternalSoftware(name) {
  window.ipcRenderer
    .invoke("startExternalSoftware", name)
}
</script>

<style></style>
